<template>
  <!-- 6\7模块 -->
  <div :id="getPicInfo.id" :style="{ width: '100%', height: '350px' }"></div>
</template>
<script>
// 按需导入 基本模板
let echarts = require("echarts/lib/echarts");
// 柱状图
require("echarts/lib/chart/pie");
require("echarts/lib/chart/line");
// toolTip提示框 和 title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
export default {
  data() {
    return {
      flag: false,
    };
  },
  props: {
    pieData: Array,
    lastMonthData: Array,
    monthData: Array,
    picInfo: Object,
  },
  computed: {
    getPieData() {
      return this.pieData;
    },
    getLastMonthData() {
      return this.lastMonthData;
    },
    getMonthData() {
      return this.monthData;
    },
    getPicInfo() {
      return this.picInfo;
    },
  },
  watch: {
    getPieData(newVal) {
      this.drawPieAndLIne(this.getPieData, this.lastMonthData, this.monthData);
    },
  },
  mounted() {},
  methods: {
    drawPieAndLIne(pieData, lastMonthData, monthData) {
      let myChart = echarts.init(
        document.getElementById(this.getPicInfo.id),
        "dark"
      );
      let day = Array.from(Array(31), (i, k) => k + 1);
      let smallScreen = { pie: {}, line: {} };
      if (window.screen.availWidth < 1500) {
        smallScreen = {
          pie: {
            radius: [0, 50],
            center: ["52%", "50%"],
            fontSize: 10,
          },
          line: {
            x: "58%",
            y: 45,
            x2: "5%",
            y2: 60,
          },
        };
      }
      myChart.setOption({
        title: [
          {
            subtext: this.getPicInfo.subtext1,
            left: "25%",
            bottom: "5%",
            textAlign: "center",
          },
          {
            subtext: this.getPicInfo.subtext2,
            left: "75%",
            bottom: "5%",
            textAlign: "center",
          },
        ],
        // 提示语
        tooltip: {
          trigger: "axis",
          formatter(params) {
            // params 为一个数组，数组的每个元素 包含了 该折线图的点 所有的参数信息，比如 value(数值)、seriesName（系列名）、dataIndex（数据项的序号）
            let tipList = params.map((seg) => {
              let { value, seriesName } = seg;
              return `${seriesName}：${value}`;
            });
            tipList.unshift(`${params[0].name} 号`);
            return tipList.join("<br/>");
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },

        series: [
          {
            type: "pie",
            radius: smallScreen.pie.radius || [0, 80],
            center: smallScreen.pie.center || ["45%", "50%"],
            data: pieData,
            avoidLabelOverlap: true,
            hoverAnimation: false,
            label: {
              position: "outside",
              margin: 200,
              normal: {
                formatter: "{b}  {c}",
                textStyle: {
                  fontSize: smallScreen.pie.fontSize || 12,
                },
              },
            },
            left: 0,
            right: "50%",
            top: 10,
            bottom: 0,
          },
          {
            data: lastMonthData,
            type: "line",
            smooth: true,
            name: "上月",
          },
          {
            name: "本月",
            data: monthData,
            type: "line",
            smooth: true,
          },
        ],
        xAxis: {
          type: "category",
          data: day,
        },
        yAxis: {
          type: "value",
        },
        grid: {
          x: smallScreen.line.x || "50%",
          y: smallScreen.line.y || 45,
          x2: smallScreen.line.x2 || "5%",
          y2: smallScreen.line.y2 || 60,
        },
      });
    },
  },
};
</script>
<style lang='css' scoped>
body {
}
</style>
